<script setup lang="ts">
import shiming from "~/assets/images/auth/shiming.png";
import yinhang from "~/assets/images/auth/yinhang.png";
import disanfang from "~/assets/images/auth/disanfang.png";

defineOptions({
  name: "auth",
});

const register = ref([
  {
    type: "personal",
    title: "我是个人用户",
    desc: "我要买东西",
    options: [
      {
        image: shiming,
        title: "实名认证",
        desc: "畅游小浦",
        btnText: "去认证",
        btnLink: "/auth",
      },
      {
        image: yinhang,
        title: "绑定银行卡",
        desc: "畅游小浦",
        btnText: "去绑定",
        btnLink: "/auth",
      },
      {
        image: disanfang,
        title: "第三方绑定",
        desc: "畅游小浦",
        btnText: "去绑定",
        btnLink: "/auth",
      },
    ],
  },
  {
    type: "company",
    title: "我是企业用户",
    desc: "我要入驻平台",
    options: [
      {
        image: shiming,
        title: "企业入驻",
        desc: "畅游小浦",
        btnText: "去认证",
        btnLink: "/auth",
      },
      {
        image: yinhang,
        title: "绑定银行卡",
        desc: "畅游小浦",
        btnText: "去绑定",
        btnLink: "/auth",
      },
      {
        image: disanfang,
        title: "第三方绑定",
        desc: "畅游小浦",
        btnText: "去绑定",
        btnLink: "/auth",
      },
    ],
  },
]);
const activeType = ref("personal");
// 计算属性获取regitster哪一项
const activeRegister = computed(() => {
  return register.value.find((item) => item.type === activeType.value);
});
</script>

<template>
  <div class="flex-1 h-full flex flex-col ml-6 bg-white">
    <div class="border-b">
      <div class="grid grid-cols-2 -translate-y-2">
        <div
          class="text-center py-4 bg-white cursor-pointer rounded-lg"
          v-for="(item, index) in register"
          :key="index"
          :class="{ '-translate-y-2': item.type === activeType }"
          @click="activeType = item.type"
        >
          <div class="font-bold">{{ item.title }}</div>
          <div class="text-sm mt-2 text-gray-500">{{ item.desc }}</div>
        </div>
      </div>
    </div>
    <div class="flex-1 bg-white grid grid-rows-3">
      <div
        class="flex items-center px-5"
        v-for="(item, index) in activeRegister?.options"
      >
        <img :src="item.image" />
        <div class="flex-1 flex items-center justify-between ml-5">
          <div>
            <div>{{ item.title }}</div>
            <div class="text-sm mt-2 text-gray-500">
              {{ item.desc }}
            </div>
          </div>
          <el-button type="primary">{{ item.btnText }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
